<template>
  <v-bottom-navigation
    class="d-flex justify-space-between align-center pl-2"
    app
    height="50"
  >
    <v-radio-group v-model="selectAllStatus" row dense>
      <v-radio class="ma-0" :value="1"></v-radio>
      <span
        @click="toggleSelectAll"
        class="d-flex align-center subtitle-2"
        v-text="selectAllRadioBtnText"
      ></span>
    </v-radio-group>
    <span class="subtitle-2">
      <span class="ma-1">商品总价</span>
      <span class="ma-1 red--text" v-text="`￥${totalPrice}`"></span>
    </span>
    <v-btn @click="$emit('onSettlement')" class="white--text" color="#2AB795"
      >去结算</v-btn
    >
  </v-bottom-navigation>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'shopping-cart-bottombar',
  data() {
    return {
      selectAllStatus: 0,
      totalPrice: 0
    };
  },
  methods: {
    toggleSelectAll() {
      this.selectAllStatus = 1 - this.selectAllStatus;
    }
  },
  mounted() {
    this.$bus.on('onCartItemSelected', deltaPrice => {
      this.totalPrice += deltaPrice;
    });
  },
  destroyed() {
    this.$bus.off('onCartItemSelected');
  },
  watch: {
    selectAllStatus(newValue) {
      this.$bus.emit('onShoppingCartSelectAll', newValue);
    }
  },
  computed: {
    selectAllRadioBtnText(): string {
      return this.selectAllStatus === 0 ? '全选' : '全不选';
    }
  }
});
</script>
